<template>
  <div class="user-message-card">
    <el-card shadow="always" :body-style="{ padding: '0px' }">
      <div class="background-image">
        <div class="user-message-container">
          <el-avatar
            shape="circle"
            :size="75"
            fit="fit"
            class="avatar"
            src="https://thirdqq.qlogo.cn/g?b=qq&nk=2420228300&s=100"
          ></el-avatar>
          <span class="user-name">辉</span>
          <span class="signature">愿世界再无锋</span>
        </div>
        <div class="article-message-container">
          <div>
            <span class="articles-size">123</span>
            <span>文章数</span>
          </div>

          <div>
            <span class="components-size">123</span>
            <span>评论量</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.avatar {
  margin: 0px auto;
  margin-top: 15%;
  outline: 1px solid #409eff;
  outline-offset: 3px;
  transition: 1s all;
}
.user-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user-name {
  color: #409eff;
  font-size: 16px;
  margin: 5% 0px;
}
.signature {
  max-lines: 3;
  width: 80%;
  word-break: break-all;
  text-align: center;
}
.article-message-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 5% auto;
}

.article-message-container span {
  display: block;
  text-align: center;
}
.article-message-container span:first-child {
  font-size: 20px;
}
.article-message-container span:last-child {
  font-size: 10px;
  color: gray;
  margin-top: 5px;
}
.user-message-card:hover .avatar {
  transform: rotateY(360deg) rotateZ(360deg);
}
.background-image {
  background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),
    url("../../../public/img/user_background_image.jpg");
  overflow: hidden;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
}
</style>
